<template>
  <view class="videoDetail">
    <video :src="videoUrl" class="video"></video>
    <!-- <view class="input_comment">
      <u-input v-model="value" :type="types" :border="border" />
      <u-button :ripple="true" size="mini" type="primary">发送</u-button>
      </view> -->
    <u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
    <view v-if="curNow === 0">
      <view class="hotComment" v-for="item in hotComments" :key="item.commentId">
        <view class="hotComment_content">
          <image :src="item.user.avatarUrl" mode="widthFix"></image>
          <view class="hotComment_Info">
            <text>{{ item.user.nickname }}</text>
            <text>{{ item.timeStr }}</text>
          </view>
        </view>
        <text user-select selectable class="sss">{{ item.content }}</text>
      </view>
      
    </view>
    <view v-else-if="curNow === 1">
      <view class="Comment" v-for="item in comments" :key="item.commentId">
        <view class="Comment_content">
          <image :src="item.user.avatarUrl" mode="widthFix"></image>
          <view class="Comment_Info">
            <text>{{ item.user.nickname }}</text>
            <text>{{ item.timeStr }}</text>
          </view>
        </view>
        <text class="sss">{{ item.content }}</text>
      </view>
      <!-- <view class="input_comment"><u-input v-model="value" :type="types" :border="border" /></view> -->
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
const dayjs = require('dayjs')
export default {
  onLoad(options) {
    if (options.type === '1') {
      this.getVideoUrl(this.VideoId)
      this.getVideoHotComment(this.VideoId, 5)
      this.getVideoComment(this.VideoId)
    } else if (options.type === '2') {
      this.getMvUrl(this.VideoId)
      this.getVideoHotComment(this.VideoId, 1)
      this.getMvComment(this.VideoId)
    }
  },
  data() {
    return {
      type: '',
      videoUrl: [],
      list: [
        {
          name: '热门评论'
        },
        {
          name: '精彩评论'
        }
      ],
      curNow: 0,
      comments: [],
      hotComments: [],
      value: '',
      types: 'text',
      border: true
    }
  },
  computed: {
    ...mapState(['VideoId'])
  },
  methods: {
    sectionChange(index) {
      this.curNow = index
    },

    async getVideoHotComment(id, type) {
      const { data: res } = await uni.$http.get('comment/hot', { id: id, type: type })
      // console.log(res)
      if (res.code !== 200) return uni.$showMsg('热门评论获取失败')
      this.hotComments = res.hotComments
    },
    async getVideoComment(id) {
      const { data: res } = await uni.$http.get('comment/video', { id: id })
      // console.log(res)
      if (res.code !== 200) return uni.$showMsg('视频评论获取失败')
      this.comments = res.comments
    },
    async getMvComment(id) {
      const { data: res } = await uni.$http.get('comment/mv', { id: id })
      // console.log(res)
      if (res.code !== 200) return uni.$showMsg('mv评论获取失败')
      this.comments = res.comments
    },
    async getVideoUrl(id) {
      const { data: res } = await uni.$http.get('video/url', { id: id })
      // console.log(res)
      if (res.code !== 200) return uni.$showMsg('视频播放地址获取失败')
      this.videoUrl = res.urls[0].url
    },
    async getMvUrl(id) {
      // this.videoId.forEach(async item => {
      const { data: res } = await uni.$http.get('mv/url', { id: id })
      // console.log(res)
      if (res.code !== 200) return uni.$showMsg('视频播放地址获取失败')
      // this.videoUrl.push(res.urls[0].url)
      this.videoUrl = res.data.url
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.videoDetail {
  height: 100%;
  background-color: #edece8;
  // margin-bottom: 90rpx;
}
.video {
  width: 100%;
}
.hotComment,
.Comment {
  display: flex;
  flex-direction: column;
  border-bottom: 1rpx solid #c0c4cc;
  // align-items: center;
}
.hotComment_content,
.Comment_content {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
}
.hotComment image,
.Comment image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  // box-shadow: 0 2rpx 20rpx pink;
  margin: 0 40rpx 0 20rpx;
}
.hotComment_Info,
.Comment_Info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sss {
  margin: 0 0 20rpx 160rpx;
}
// .input_comment {
//   position: fixed;
//   width: 100%;
//   display: flex;
//   height: 90rpx;
//   bottom: 0rpx;
//   justify-content: space-between;
//   align-items: center;
// }
// /deep/.u-btn{
//   flex: 1;
// }
// /deep/.u-input__input{
//   // flex: 3 !important;
//   width: 170%;
// }
</style>
